<%- include('./layout/header') %>

<div class="ui grid">
    <div class="five wide column"></div>
    <div class="six wide column">
        <div class="ui middle aligned center aligned grid">
            <div class="column">
                <h2 class="ui teal image header">
                    <div class="content">
                        Sign in to your account
                    </div>
                </h2>
                <form class="ui large form" method="post">
                    <div class="ui stacked segment">
                        <div class="field">
                            <div class="ui left icon input">
                                <i class="user icon"></i>
                                <input type="text" name="id" placeholder="Your student ID">
                            </div>
                        </div>
                        <div class="field">
                            <div class="ui left icon input">
                                <i class="lock icon"></i>
                                <input type="password" name="password" placeholder="Password">
                            </div>
                        </div>
                        <input type="submit" onclick="signin()" class="ui button fluid green large submit" value="Sign in">
                    </div>

                    <div class="ui error message"></div>

                </form>
                
                <div class="ui message">
                    <a href="/signup">Sign Up</a>
                </div>
            </div>
        </div>
    </div>
    
</div>
<script>
        function signin() {
            $(".ui.form").form(
                {
                    inline: true,
                    on: 'blur',
                    fields: {
                        id: {
                            identifier: 'id',
                            rules: [{
                                type: 'empty',
                                prompt: 'Student ID should not be empty'
                            }, {
                                type: 'exactLength[11]',
                                prompt: 'Your Student ID\'s format is not correct,please enter 11 digits'
                            }, {
                                type: 'number',
                                prompt: 'Your Student ID\'s format is not correct,please enter a valid number'
                            }]
                        },
                        userpass: {
                            identifier: 'password',
                            rules: [{
                                type: 'empty',
                                prompt: 'Password should not be empty'
                            }]
                        }
                    },
                }, {
                    onSuccess: function () {
                        console.log('ok')
                    }
                }
            );
        }
</script>
<%- include('./layout/footer') %>